<template>
	<el-dialog width="400" v-model="show" :title="isEdit ? '编辑账号' : '新增账号'" class="role-group-dialog">
		<div class="dialog-content">
			<el-form :model="itemInfo" label-width="80px" class="form-container">
				<el-form-item label="登录账号">
					<el-input v-model="itemInfo.username" placeholder="请输入账号" />
				</el-form-item>
				<el-form-item label="登录密码">
					<el-input v-model="itemInfo.password" type="password"
						:placeholder="isEdit ? '若不修改密码,请留空' : '请输入登录密码'" />
				</el-form-item>
				<el-form-item label="确认密码">
					<el-input v-model="itemInfo.passwordConfirm" type="password"
						:placeholder="isEdit ? '若不修改密码,请留空' : '再次输入登录密码'" />
				</el-form-item>
				<el-form-item label="状态" v-if="!itemInfo.is_administrators">
					<el-radio-group v-model="itemInfo.status">
						<el-radio-button :value="1">启用</el-radio-button>
						<el-radio-button :value="0">禁用</el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="账号昵称">
					<el-input v-model="itemInfo.nickname" placeholder="请输入账号" />
				</el-form-item>
				<el-form-item label="角色组" v-if="!itemInfo.is_administrators">
					<el-select v-model="itemInfo.group_id" placeholder="请选择角色组" style="width: 240px">
						<el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="itemInfo.remark" type="textarea" placeholder="请输入备注信息" :rows="3" />
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="show = false" class="footer-button">取消</el-button>
				<el-button type="primary" @click="handleSave" class="footer-button"
					:loading="saveLoading">保存</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script>
import { ElMessage } from 'element-plus'
import { useAccountStore } from '../../../../stores/account'
export default {
	data() {
		return {
			show: false,
			saveLoading: false,
			groupList: [],
			itemInfo: {},
			itemInfoDefault: { status: 1 },
		}
	},
	computed: {
		accountStore() {
			return useAccountStore()
		},
		isEdit() {
			return this.itemInfo.id ? true : false
		}
	},
	created() {
		this.getAccountGroupList()
	},
	watch: {
		show(a, b) {
			if (!a) {
				this.itemInfo = JSON.parse(JSON.stringify(this.itemInfoDefault))
			} else {
				this.$nextTick(() => {
					if (!this.itemInfo.id) {
						//新增
						this.itemInfo = JSON.parse(JSON.stringify(this.itemInfoDefault))
					}
				})
			}
		}
	},
	methods: {
		getAccountGroupList() {
			this.accountStore.getGroupList().then(res => {
				if (res.code !== 200) {
					throw new Error(res.message);
				}
				this.groupList = res.data.list
			}).catch(err => {
				ElMessage.error('角色组加载失败,' + err.message)
			})
		},
		handleSave() {
			this.saveLoading = true
			let data = this.itemInfo
			this.accountStore.editAccount(data).then(res => {
				if (res.code !== 200) {
					throw new Error(res.message);
				}
				ElMessage.success(res.message)
				this.$emit('editAccountSuccess')
				this.show = false
			}).catch(err => {
				ElMessage.error("保存失败," + err.message)
			}).finally(() => {
				this.saveLoading = false
			})
		}

	}
}
</script>

<style lang="less" scoped>
.role-group-dialog {
	.dialog-content {

		.form-container {
			width: 100%;
			border-radius: 8px;
			border: 1px solid #e5e7eb;
			background-color: rgba(249, 250, 251, 0.5);
			padding: 16px;
		}

		.permission-container {
			flex: 1;
			border-radius: 8px;
			border: 1px solid #e5e7eb;
			background-color: rgba(249, 250, 251, 0.5);
			padding: 16px;

			.permission-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 8px;

				.header-title {
					font-weight: 500;
				}

				.header-actions {
					display: flex;
					gap: 0px;

				}
			}
		}
	}

	.dialog-footer {
		display: flex;
		justify-content: flex-end;

		.footer-button {
			white-space: nowrap;
		}
	}

	.action-button {
		white-space: nowrap;
		font-size: 10px;
	}
}
</style>